<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
    </div>
  </template>
  <script lang="ts">
  import { defineComponent, ref} from 'vue';
  export default defineComponent({
    name: 'Header',
    props:{
        addTodo:{
            type:Function,
            require:true
        }
    },
    setup(props){
        // 定义一个ref类型数据
        const title=ref('')
        // 回车的事件回调函数，用来添加数据
        const add=()=>{
            // 获取文本框输入的数据且不为空
            const text=title.value
            if(!text.trim()) return
            // 有数据
            const todo={
                id:Date.now(),
                title:text,
                isCompleted:false
            }
            // 调用方法
            props.addTodo(todo)
            title.value=''
        }
        return{
            title,
            add
        }
    }
  });
  </script>
<style scoped>
.todo-header input{
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
}
.todo-header input:focus{
    outline: none;
    border-color: rgb(120, 149, 245);
    box-shadow:inset 0 1px 1px #888,0 0 8px rgb(120, 149, 245)
}
</style>